<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-input/paper-input.html">
<link rel="import" href="/a/elements/utility/ajax-service.html">

<polymer-element name="login-page">
    <template>
        <link rel="stylesheet" type="text/css" href="/assets/main.css" shim-shadowdom>
        <div class="container">
            <div id="single_panel" vertical layout>
                <h1>Login</h1>

                <p id="re_text" style="display:none;color:red">msg</p>
                <paper-input label="Email:" name="email" value="{{params.email}}" floatingLabel required
                             autofocus></paper-input>
                <paper-input label="Password:" name="password" value="{{params.password}}" floatingLabel required
                             type="password" on-keypress="{{inputEnter}}"></paper-input>
                <paper-button class="single" on-click="{{buttonClick}}" label="Login" raisedButton
                              default></paper-button>
                <ajax-service id="ajax" url="/admin/session" params="{{params}}" handleAs="json" method="post"
                              on-core-response="{{response}}"></ajax-service>
            </div>
        </div>
    </template>
    <script>
        Polymer('login-page', {
            created: function () {
                this.params = {};
            },
            buttonClick: function () {
                if (this.params.email.length > 0 && this.params.password.length > 0) {
                    this.$.ajax.go();
                }
            },
            response: function () {
                var re = this.$.ajax.response;
                if (re["status"]) {
                    location.href = "/admin";
                }else{
                    this.$.re_text.style.display = "block";
                    this.$.re_text.innerHTML = re["msg"];
                }
            },
            inputEnter: function () {
                if (event.keyCode == 13) {
                    this.buttonClick();
                    return false;
                }
            }
        });
    </script>
</polymer-element>